@import "color";

// 蓝色主题色
.color (@n) when (@n = 1) {
    @color-primary: @blue;
    @color-primary-dark: @dark-blue;
    @color-primary-light: @light-blue;
    @color-primary-hover: @hover-blue;
    @color-primary-active: @active-blue;
    @color-minor: @orange;
    @color-minor-light: @light-orange;
    @color-minor-hover: @hover-orange;
    @color-minor-active: @active-orange;
}

// 主题色循环
.generate-columns(1);
.generate-columns(@n, @i: 1) when (@i =< @n) {
    @name: ~"theme@{i}";
    .color(@i);
    .selector(@name, @color-primary, @color-primary-dark, @color-primary-light, @color-primary-hover, @color-primary-active, @color-minor, @color-minor-light, @color-minor-hover, @color-minor-active);
    .generate-columns(@n, (@i + 1));
}

.selector(@my-selector,...) {
    .@{my-selector} {
        // 灰色线框按钮
        .el-button--default {
            &:hover, &:focus, &:active {
                border-color: @color-primary;
                color: @color-primary;
                background-color: @color-primary-light;
            }
        }

        // 主题色线框按钮
        .el-button--default.primary {
            border-color: @color-primary;
            color: @color-primary-dark;
        }

        // 次题色线框按钮
        .el-button--default.minor {
            border-color: @color-minor;
            color: @color-minor;

            &:hover, &:focus, &:active {
                border-color: @color-minor;
                color: @color-minor;
                background-color: @color-minor-light;
            }
        }

        // 主题按钮
        .el-button--primary {
            background-color: @color-primary;
            border-color: @color-primary;
            color: #fff;

            &:hover, &:focus {
                background: @color-primary-hover;
                border-color: @color-primary-hover;
                color: #fff;
            }

            &:active, &.is-active {
                background: @color-primary-active;
                border-color: @color-primary-active;
                color: #fff;
            }
        }

        // 次主题按钮
        .el-button--minor {
            background-color: @color-minor;
            border-color: @color-minor;
            color: #fff;

            &:hover, &:focus {
                background: @color-minor-hover;
                border-color: @color-minor-hover;
                color: #fff;
            }

            &:active, &.is-active {
                background: @color-minor-active;
                border-color: @color-minor-active;
                color: #fff;
            }
        }

        // 置灰按钮
        .el-button--disabled, .el-button.is-disabled {
            background-color: @lighter-gray-color;
            border-color: @lighter-gray-color;
            color: #fff;

            &:hover, &:focus, &:active, &.is-active {
                background: @lighter-gray-color;
                border-color: @lighter-gray-color;
                color: #fff;
            }
        }

        // 输入框-光标颜色
        .el-input__inner, .el-textarea__inner {
            caret-color: @color-primary;
        }

        // select下拉框
        .el-select-dropdown__item {
            &.hover, &:hover {
                color: @color-primary;
                background-color: @color-primary-light;
            }
        }

        // upload
        .el-upload-list__item {
            .el-icon-upload-success {
                color: @color-primary;
            }
        }

        .el-upload-list--picture {
            .el-upload-list__item-status-label {
                background-color: @color-primary;
            }
        }

        // 步骤条
        .el-step__head, .el-step__title {
            &.is-finish {
                .el-step__line {
                    background-color: @color-primary;
                }
            }
        }

        // 文字、边框、背景主题色
        .color-primary {
            color: @color-primary;

            &:hover, :focus {
                color: @color-primary-hover;
            }

            &:active {
                color: @color-primary-active
            }
        }

        .border-primary {
            border-color: @color-primary
        }

        .background-primary {
            background-color: @color-primary;
        }

        // 文字、边框、背景次主题色
        .color-minor {
            color: @color-minor;

            &:hover, :focus {
                color: @color-minor-hover;
            }

            &:active {
                color: @color-minor-active
            }
        }

        .border-minor {
            border-color: @color-minor
        }

        .background-minor {
            background-color: @color-minor;
        }
    }
}
